<!DOCTYPE html>
<html>

<head>
    <title>课程管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1, h2 {
            color: #333;
        }

        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        table th, table td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }

        table th {
            background-color: #f0f0f0;
        }

        button {
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        a {
            text-decoration: none;
            color: #007bff;
            margin-top: 20px;
            border: 1px solid #007bff;
            padding: 5px 10px;
            border-radius: 5px;
            transition: all 0.3s;
        }

        a:hover {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>

<body>
    <h1>课程管理系统</h1>

    <div>
        <h2>课程列表</h2>
        <table>
            <thead>
                <tr>
                    <th>课程ID</th>
                    <th>课程名称</th>
                    <th>课程学时</th>
                    <th>课程学分</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="courseList">
                <!-- 课程列表将在这里显示 -->
            </tbody>
        </table>
    </div>

    <a href="/create_course">添加新课程</a>
 
    <script> 
    function updateCourse(id) {
            window.location.href = 'update_course.html?id=' + id;
        }

        function deleteCourse(id) {
            var confirmDelete = confirm('确定要删除该课程吗？'); // 提示用户确认删除操作
            if (confirmDelete) {
                var xhr = new XMLHttpRequest();
                xhr.open('DELETE', 'http://localhost:8080/deleteCourse/' + id, true);
                xhr.onload = function () {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log('Course deleted successfully');
                        getCourses(); // 更新课程列表
                    } else {
                        console.error(xhr.statusText);
                    }
                };
                xhr.send();
            }
        }
        function getCourses() {   
            var xhr = new XMLHttpRequest();  
            xhr.open('GET', 'http://localhost:8080/kzz', true);   
            xhr.onload = function () {  
                if (xhr.status >= 200 && xhr.status < 300) {  
                    var courses = JSON.parse(xhr.responseText);  
                    var courseList = document.getElementById('courseList');   
                    courseList.innerHTML = '';  
                    courses.forEach(function (course) {  
                        var row = document.createElement('tr');  
                        row.innerHTML = `  
                            <td>${course.id}</td>  
                            <td>${course.course_name}</td>  
                            <td>${course.course_time}</td>  
                            <td>${course.course_location}</td>
                            <td>
                                <button onclick="updateCourse(${course.id})">更新</button>
                                <button onclick="deleteCourse(${course.id})">删除</button>
                            </td>  
                        `;   
                        courseList.appendChild(row);  
                    });  
                } else {  
                    console.error(xhr.statusText);  
                }  
            };  
            xhr.send();  
        }  
        function createCourse() {   
            var courseName = document.getElementById('courseName').value;   
              
  
            var data = {  
                course_name: courseName,   
                  
            };  
  
            var xhr = new XMLHttpRequest();  
            xhr.open('POST', 'http://localhost:8080/createCourse', true);   
            xhr.setRequestHeader('Content-Type', 'application/json');  
            xhr.onload = function () {  
                if (xhr.status >= 200 && xhr.status < 300) {  
                    getCourses();   
                    document.getElementById('courseName').value = '';   
                    
                } else {  
                    console.error(xhr.statusText);  
                }  
            };  
            xhr.send(JSON.stringify(data));  
        }  
  
        getCourses();   
    </script>  
</body>  
  
</html>